<template>
    <div class="repositories">
        <Header/>
        <div class="second_show">
            <div class="img"></div>
            <div class="pages_w1470" v-if="menudatalist">
                <div class="second_show_text repositories fl-clr">
                    <div class="second-title">
                        <p class="en" v-html="menudata.alias"></p>
                        <p class="cn">寻种之路</p>
                    </div>
                    <div class="text" v-html="menudata.content">
                    </div>
                </div>
            </div>
            <i class="tips"></i>
        </div>

        <div class="second_box" >
            <img src="../assets/images/icon/repositories-r.svg" class="repositories-r">
            <div class="pages_w1470" v-if="menudatalist">
                <div class="repositories-top fl-clr">
                    <div class="second-title opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                        <p class="en">{{menudatalist[0].alias}}</p>
                        <p class="cn">{{menudatalist[0].name}}</p>
                    </div>
                    <div class="text pc" v-html="menudatalist[0].info">

                    </div>
                </div>

                <div class="swiper-repositories-show">
                    <swiper :options="swiperOption">
                        <swiper-slide v-for="(item,index) in menudatalist[0].data" :key="index" v-show="index<8"><div class="box scale"><img :src="$store.state.domain+item.pic" style="width: 100%"></div></swiper-slide>
                    </swiper>
                    <div class="a swiper-prev"><i></i></div>
                    <div class="a swiper-next"><i></i></div>
                    <div class="swiper_more"><img src="../assets/images/more.svg"></div>
                </div>
                <div class="swiper-repositories-show-text web" v-html="menudatalist[0].info"></div>
                <div class="swiper-repositories-show-text" v-html="menudatalist[0].content"></div>


                <div class="second-title opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top',delay:300}">
                    <p class="en">{{menudatalist[1].alias}}</p>
                    <p class="cn">{{menudatalist[1].name}}</p>
                </div>

                <ul class="ul repositories-list fl-clr opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
                    <li v-for="(item,index) in menudatalist[1].data" :key="index">
                        <div class="box">
                            <div class="title"><img :src="$store.state.domain+item.pic"></div>
                            <div class="bottom">
                                <div class="imgshow" v-html="item.album">
                                </div>
                                <div class="txt" v-html="item.info">
                                </div>
                                <router-link :to="{name:'repositories_details', params: { id: item.id }}" class="more">READ MORE</router-link>
                            </div>
                        </div>
                    </li>
                </ul>
                <ul class="ul repositories-list fl-clr opacityli" data-uk-scrollspy="{cls:'uk-animation-slide-top', target:'> li', delay:300}">
                    <li v-for="(item,index) in menudatalist[2].data" :key="index">
                        <div class="box">
                            <div class="title"><img :src="$store.state.domain+item.pic"></div>
                            <div class="bottom">
                                <div class="imgshow" v-html="item.album">
                                </div>
                                <div class="txt" v-html="item.info">
                                </div>
                                <router-link :to="{name:'repositories_details', params: { id: item.id }}" class="more">READ MORE</router-link>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
        <Footer/>

    </div>
</template>





<script>
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'
export default {
    components: {
        Footer,Header
    },
    data () {
        return {
            swiperOption:{
                slidesPerView:2,
                spaceBetween:20,
                loop: true,
                navigation: {
                   nextEl: '.swiper-repositories-show .swiper-prev',
                   prevEl: '.swiper-repositories-show .swiper-next',
                },
                breakpoints:{
                    750:{
                        slidesPerView:2
                    },
                    320:{
                         slidesPerView:1,
                         spaceBetween:0,
                    }
                }
            }
        }
    },
    computed: {

        menudata() {
            if(JSON.stringify(this.$store.getters.getmenudata(4)).length>100){
                return this.$store.getters.getmenudata(4)
            }else{
                return false
            }
        },
        menudatalist() {
            if(JSON.stringify(this.$store.getters.getmenudatalist(4)).length>100){
                return this.$store.getters.getmenudatalist(4)
            }else{
                return false
            }
        },
        menulistconfig() {
            return this.$store.getters.getmenuconfig
        }
    },
    mounted () {
        $('.second_show .tips').fadeIn(1000)
        $('.second_show').addClass("show")
    }
}
</script>
